<!--
	作者：offline
	时间：2019-01-29
	描述：问题详情
-->
<template>
  <div class="m-view-questionDetails">
    <el-button @click="goBack">返回</el-button>
    <el-card class="box-card2">
      <div slot="header" class="clearfix">
        <p style="text-align: center;font-size: 20px;">{{detail.title}}</p>
      </div>
      <p style="padding-left: 5px;" v-html="detail.content"></p>
    </el-card>
    <div class="noticeFile">
      <div>
        附件：
        <el-row :gutter="4" v-if="detail.attachments.length>0">
          <el-col
            v-for="item in detail.attachments"
            :key="item.ID"
            :label="item.name"
            :value="item.url"
            :span="4"
          >
            <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
              <p
                style="font-size:16px; color:blue; text-decoration:underline; cursor:pointer;"
                @click="downLoadFile(item)"
                class="filesName"
              >{{item.name.length>16?`${item.name.substring(0,4)}....${item.name.substring(item.name.length-7,item.name.length)}`:item.name}}</p>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row :gutter="4" v-else>
          <el-col :span="4">
            <p style="font-size:14px; color:#409EFF">未上传附件</p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import downLoadFileFunc from "@/public/downLoadFile"
export default {
  data () {
    return {
      title: "问题标题",
      content: "<div>内容</div>",
      attachmentList: []
    }
  },
  methods: {
    downLoadFile (params) {
      var obj = {};
      obj.viewPath = params.url;
      obj.groupName = 'TEST';
      obj.fileName = ''
      if (params.url.indexOf('SRM') > -1) {
        obj.groupName = 'SRM'
      } else if (params.url.indexOf('SIGN') > -1) {
        obj.groupName = 'SIGN'
      } else if (params.url.indexOf('TEST') > -1) {
        obj.groupName = 'TEST'
      }
      downLoadFileFunc(obj, params.name)
    },
    downLoad (url, filename) {
      var eleLink = document.createElement('a');
      eleLink.style.display = 'none';
      eleLink.setAttribute("href", url);   //文件下载地址
      eleLink.setAttribute("download", filename);  //download属性只能在同域实现
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    goBack () {
      this.$emit("goBackList");
    },
  },
  mounted () {

  },
  props: {
    detail: {
      type: Object
    }
  }
}
</script>
<style lang="less" scoped>
.m-view-questionDetails {
  position: relative;
  height: 100%;
  width: 100%;
  .el-button {
    float: right;
  }
  .box-card2 {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0px;
    right: 0px;
    overflow: auto;
  }
  .noticeFile {
    right: 0px;
    left: 0px;
    position: absolute;
    bottom: 0px;
    .filesName {
      white-space: nowrap;
    }
  }
  .el-card__header {
    height: 70px;
    border-bottom: none;
  }
  /deep/ .el-card__body {
    top: 50px;
    p {
      img {
        max-width: 100%;
      }
    }
  }
}
</style>>